<template>
  <div class="app">
    <!-- 头部 -->
    <header>
      <van-icon name="arrow-left" />
      <div class="am-search">
        <div class="am-search-left">
          <router-link to="/citylist" class="route-link" v-if="pullValue !== undefined"
            >{{ pullValue }}<van-icon name="arrow-down"
          /></router-link>
             <router-link to="/citylist" class="route-link" v-else
            >上海<van-icon name="arrow-down"
          /></router-link>
          <input type="text" name="" id="" placeholder="请输入小区或地址" />
          <!-- <van-icon name="search" /> -->
        </div>
        <span>88</span>
      </div>
    </header>
    <!-- 筛选部分 -->
    <van-sticky>
      <div class="filter-content">
        <!-- 区域 -->
        <van-dropdown-menu active-color="blue">
          <van-dropdown-item title="区域">
            <van-picker
              show-toolbar
              toolbar-position="bottom"
              :columns="areaSubway"
              confirm-button-text="确定"
              value-key="label"
            />
          </van-dropdown-item>
          <van-dropdown-item title="方式">
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="columnsWay"
            />
          </van-dropdown-item>
          <van-dropdown-item title="租金">
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="columnsPrice"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 筛选 -->
        <div class="am-item">
          <van-cell is-link @click="showPopup">筛选</van-cell>
          <van-popup
            class="filter-more-tags"
            v-model="show"
            position="right"
            :style="{ width: '75%', height: '100%' }"
           @close="closePopup"
          >
            <dl class="am-FilterHeader" >
              <dt>户型</dt>
              <dd>
                <van-grid :gutter="10" :column-num="3">
                  <van-grid-item
                  @click="checkRoomType(item.value)"
                   :class="{ActiveDd:flag}"
                   v-for="(item) in roomType" :key="item.id">{{
                    item.label
                  }}</van-grid-item>
                </van-grid>
              </dd>
              <dt>朝向</dt>
              <dd>
                <van-grid :gutter="10" :column-num="3">
                  <van-grid-item v-for="item in oriented" :key="item.id">{{
                    item.label
                  }}</van-grid-item>
                </van-grid>
              </dd>
              <dt>楼层</dt>
              <dd>
                <van-grid :gutter="10" :column-num="3">
                  <van-grid-item v-for="item in floor" :key="item.id">{{
                    item.label
                  }}</van-grid-item>
                </van-grid>
              </dd>
              <dt>房屋亮点</dt>
              <dd>
                <van-grid :gutter="10" :column-num="3">
                  <van-grid-item
                    v-for="item in characteristic"
                    :key="item.id"
                    >{{ item.label }}</van-grid-item
                  >
                </van-grid>
              </dd>

            </dl>
          </van-popup>
        </div>
      </div>
    </van-sticky>
    <!-- 房屋列表 -->
    <div class="houseList">
      <div
        class="house-list"
        v-for="item in houseList"
        :key="item.id"
        @click="$router.push(`/housedetail/?id=${item.houseCode}`)"
      >
        <div class="houseimg">
          <img :src="'http://124.223.73.204:8080' + item.houseImg" alt="" />
        </div>
        <div class="houseContent">
          <h3>{{ item.title }}</h3>
          <div class="houseitem-content">{{ item.desc }}</div>
          <span class="goods" v-for="item in item.tags" :key="item.id"
            >{{ item }}
          </span>
          <div class="house-price">
            <span>{{ item.price }}</span
            >元/月
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出框按钮 -->
    <div class="am-FilterFooter" :class="{'active':isShow}">
        <button class="clear">清除</button>
        <button class="ensure">确定</button>
      </div>
  </div>
</template>

<script>
import { getHouses, screenHouseList } from '@/api-ajax/house.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      flag: false,
      show: false,
      pullValue: '上海',
      houseList: [],
      box: '',
      columnsWay: [],
      columnsPrice: [],
      areaSubway: [],
      columns: [],
      roomType: [], //  房间类型
      oriented: [], // 朝向
      floor: [], // 楼层
      characteristic: [], // 房屋亮点
      isShow: false
    }
  },
  mounted () {
    this.$toast('找到999+套房源')
  },
  created () {
    this.initData()
  },
  methods: {
    checkRoomType (value) {
      this.flag = !this.flag
      console.log(5)
      console.log(value)
    },
    closePopup () {
      this.isShow = false
      // console.log(4)
    },
    showPopup () {
      this.isShow = true
      this.show = true
    },
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange (picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
      // document.querySelector(.van-popup--top).display = block
    },
    async initData () {
    // console.log(this.$route.query.name)
      this.pullValue = this.$route.query.name
      // console.log(this.pullValue)
      const { data } = await getHouses(this.$route.query.value)
      this.houseList = data.body.list
      // console.log(this.houseList)
      // console.log(this.$route.query.value)
      // 渲染 筛选的 区域 租金 整租 筛选 部分
      const { data: res } = await screenHouseList(this.$route.query.value)
      // console.log(res)
      // res.body.area.children.forEach(element => {
      //   // console.log(element.value)
      // })
      // console.log(res.body.subway.children)
      console.log(res.body)
      // console.log(res.body.floor)
      this.roomType = res.body.roomType
      this.oriented = res.body.oriented
      this.floor = res.body.floor
      this.characteristic = res.body.characteristic
      // console.log(res.body.roomType)
      // console.log(res.body.oriented)
      // 添加区域
      this.areaSubway.push(res.body.area)
      this.areaSubway[0].children[0].children = [{ label: '' }]
      // 添加地铁
      this.areaSubway.push(res.body.subway)
      this.areaSubway[1].children[0].children = [{ label: '' }]
      // 方式
      this.columnsWay = res.body.rentType.map((item) => item.label)
      // 租金
      this.columnsPrice = res.body.price.map((item) => item.label)
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.active{
transform: translateX(-287px);
transition: 0.5s;

}
.app {
  position: relative;
   .am-FilterFooter {
    // transform: translateX(100px);
    margin-right: -287px;
    transition: all 1s;
    position: fixed;
    bottom: 0;
    width: 75%;
    right: 0;
    background-color: #fff;
    z-index: 99;
    height: 50px;
    display: flex;
    margin-top: 20px;
    border-top: 1px solid #ccc;
    .ensure {
      border-radius: 0;
      border: 0;
      color: #21b97a;
      flex: 2 1;
      color: #fff;
      background-color: #21b97a;
    }
    .clear {
      flex: 1 1;
      border-radius: 0;
      border: 0;
      color: #21b97a;
    }
  }
}
header {
  padding: 0 10px;
  height: 45px;
  background-color: #f6f5f6;
  display: flex;
  align-items: center;
  .am-search {
    width: 100%;
    display: flex;
    .am-search-left {
      // height: 30px;
      flex: 1 1;
      margin: 0 10px;
      padding: 5px 5px 5px 8px;
      border-radius: 3px;
      background-color: #fff;
      .route-link {
        font-size: 14px;
      }
      input {
        border: none;
        border-left: solid 1px #e5e5e5;
        margin-left: 12px;
        line-height: 16px;
        padding-left: 4px;
        font-size: 13px;
        color: #9c9fa1;
      }
    }
    span {
      color: #00ae66;
      font-size: 25px;
      font-style: normal;
      font-family: "iconfont" !important;
    }
  }
}
.filter-content {
  height: 40px;
  background-color: #fff;
  display: flex;
  line-height: 1.15;
  position: fixed;
  width: 100%;
  z-index: 10;
  // border-bottom: 1px solid #e4e6f0;

  ::v-deep .van-picker {
    .van-picker__columns {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .van-picker__cancel {
      flex: 1 1;
      color: #21b97a;
    }
    .van-picker__confirm {
      flex: 2 1;
      color: #fff;
      background-color: #21b97a;
    }
  }
  .van-dropdown-menu {
    // border-bottom: 1px solid #e4e6f0;
    width: 75%;
    height: 40px;
    ::v-deep .van-dropdown-menu__bar {
      height: 40px !important;
    }
  }
  .am-item {
    box-shadow: 0 0.53333vw 3.2vw rgba(100, 101, 102, 0.12);
    height: 100%;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep .van-cell__value {
      text-align: center;
    }
  }
}
.filter-more-tags {
  position: fixed;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-bottom: 50px;
  background-color: #fff;
  .am-FilterHeader {
    ::v-deep .van-grid-item__content {
      font-size: 12px;
      color: #8d8d8e;
    }
    position: fixed;
    z-index: 3;
    padding: 0 14px;
    margin: 15px 0;
    top: 0;
    dt {
      margin: 20px 0;
    }

  dd {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;
   ::v-deep .van-grid-item {
    //  background-color: red !important;
      &.ActiveDd {
        color: #00ae66;
        background-color: #fff222;
      }
    }
  }
  }
}
.houseList {
  padding: 40px 15px 50px 15px;
  width: auto;
  max-width: 345px;
  overflow: hidden;
  position: relative;

  .house-list {
    height: 120px;
    left: 0px;
    // position: absolute;
    // top: 120px;
    width: 100%;
    padding-top: 18px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    .houseimg {
      width: 106px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .houseContent {
      flex: 1;
      overflow: hidden;
      line-height: 22px;
      padding-left: 12px;
      h3 {
        font-size: 16px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 15px;
        color: #394043;
      }
      .houseitem-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 12px;
        color: #afb2b3;
      }
      .goods {
        color: #39becd;
        background: #e1f5f8;
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
      .house-price {
        font-size: 12px;
        color: #fa5741;
        span {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}

</style>
